<template>
  <div>
    <!-- <goods-list 属性="值"></goods-list> -->
    <!-- 属性不加 冒号，比如 info="越吃越香" ，表示就是传递 ”越吃越香” 这四个字 -->
    <!-- 属性加冒号，比如 :price="price" ，表示 传递的是 price的值。真正传递的是 price="4" -->
    <!-- <goods-list :goodsname="goodsname" :price="price" info="越吃越香"></goods-list> -->

    <goods-list
      v-for="item in list"
      :key="item.id"
      :id="item.id"
      :pname="item.pname"
      :price="item.price"
      :info="item.info"
      @kanyidao="jianjia"
    ></goods-list>
  </div>
</template>

<script>
import GoodsList from "@/components/GoodsList.vue";
export default {
  data() {
    return {
      // goodsname: '大大泡泡糖',
      // price: 4,
      list: [
        { id: 101, pname: "超级无敌棒棒糖", price: 15, info: "好吃，再来一根" },
        { id: 171, pname: "超级解渴水果茶", price: 80, info: "好甜，真好喝" },
        { id: 191, pname: "超级好吃大鸡腿", price: 60, info: "可口，下饭~" },
      ],
    };
  },
  components: {
    GoodsList,
  },
  methods: {
    jianjia(val, id) {
      let res = this.list.find((item) => {
        return item.id == id;
      });
      if (res.price <= 5) {
        alert("不能再砍了");
        return;
      }
      res.price = res.price - val;
    },
  },
};
</script>
